<template>
  <ScreenLayoutWithMenu title="财务数据分析大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="月度收支趋势" grid-area="a">
        <ECharts :option="financeOption" />
      </ChartCard>
      <ChartCard title="成本结构分析" grid-area="b">
        <ECharts :option="costOption" />
      </ChartCard>
      <ChartCard title="财务指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">总收入</div>
            <div class="kpi-value">¥5,678,901</div>
            <div class="kpi-change positive">↑ 15.2%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">总支出</div>
            <div class="kpi-value">¥3,456,789</div>
            <div class="kpi-change negative">↑ 8.5%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">净利润</div>
            <div class="kpi-value">¥2,222,112</div>
            <div class="kpi-change positive">↑ 22.8%</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="支出分类" grid-area="d">
        <ECharts :option="expenseOption" />
      </ChartCard>
      <ChartCard title="收入来源" grid-area="e">
        <ECharts :option="incomeOption" />
      </ChartCard>
      <ChartCard title="利润趋势" grid-area="f">
        <ECharts :option="profitOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const financeOption = ref({})
const costOption = ref({})
const expenseOption = ref({})
const incomeOption = ref({})
const profitOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  financeOption.value = getLineOption({
    categories: months,
    series: [{
      name: '收入',
      data: [500, 600, 550, 700, 680, 750]
    }, {
      name: '支出',
      data: [300, 350, 320, 400, 380, 420]
    }]
  })

  costOption.value = getBarOption({
    categories: ['人力', '运营', '技术', '营销', '其他'],
    series: [{
      name: '成本',
      data: [1200, 800, 600, 500, 400]
    }]
  })

  expenseOption.value = getPieOption({
    name: '支出分类',
    data: [
      { value: 1200, name: '人力成本' },
      { value: 800, name: '运营成本' },
      { value: 600, name: '技术成本' },
      { value: 500, name: '营销成本' },
      { value: 400, name: '其他' }
    ]
  })

  incomeOption.value = getPieOption({
    name: '收入来源',
    data: [
      { value: 2000, name: '产品销售' },
      { value: 1500, name: '服务收入' },
      { value: 1200, name: '广告收入' },
      { value: 800, name: '其他收入' }
    ]
  })

  profitOption.value = getLineOption({
    categories: months,
    series: [{
      name: '利润',
      data: [200, 250, 230, 300, 300, 330]
    }]
  })
})
</script>
